@extends('layout.default')

@section('layout.content')

  <div class="space-6"></div>
  <div class="row">
    <div class="col-xs-12">
      <div class="gift-create pull-left">
        <a href="{{route('point.gift.create')}}" class="btn btn-danger">
          <i class="ace-icon fa fa-gift"></i>
          <span class="">增加礼品</span>
        </a>
      </div>
      <div class="gift-order pull-right hidden-480">
        <label>排序：</label>
        <a href="{{route('point.gift.index',['order'=>'price'])}}"
           class="btn btn-primary {{Request::get('order')=='price'?'active focus':''}}">
          <span class="">兑换积分</span>
        </a>
        <a href="{{route('point.gift.index',['order'=>'exchanged'])}}"
           class="btn btn-primary {{Request::get('order')=='exchanged'?'active focus':''}}">
          <span class="">兑换数</span>
        </a>
        <a href="{{route('point.gift.index')}}" class="btn btn-primary {{Request::get('order')==''?'active focus':''}}">
          <span class="">更新时间</span>
        </a>
      </div>

    </div>
  </div>

  <div class="space-12"></div>

  <div class="row">
    @foreach( $gifts as $gift)
      <div class="col-xs-12 col-sm-4 col-md-1-5 channel-row">
        <div class="thumbnail search-thumbnail {{$gift->status==0?'disabled':''}}">
          <div class="thumb">
            <a href="{{route('point.gift.edit',array('gift'=>$gift->id))}}">
              <img class="img-responsive lazy" src="/assets/images/placehoder.png" data-original="{{$gift->image}}"/></a>
          </div>
          <div class="caption">
            <div class="panel-title panel-hover grey"><a
                  href="{{route('point.gift.edit',array('gift'=>$gift->id))}}"><b>{{$gift->name}}</b></a></div>
            <div class="panel-body">
              <div class="panel-50 grey"><span class="orange">{{$gift->price}}</span>
                <p>积分</p></div>
              <div class="panel-50 grey"><span class="green">{{$gift->exchanged->count()}}</span>
                <p>已兑换</p></div>
            </div>
          </div>

        </div>
      </div>
    @endforeach

  </div><!-- /.row -->
@stop

@section('javascript')
  <script src="//cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.min.js"></script>
  <script type="text/javascript">
    $(function () {

      $(".lazy").lazyload({
        effect : "fadeIn"
      });

    });
  </script>
@stop